<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.container{
				column-width:300px;
				/*column-count: 5;*/
				column-rule: 2px dotted orange;
				column-gap:30px;
			}
			.box{
				padding: 10px 0 0 10px;
				/*float: left;*/
			}
			.box img{
				border-radius: 10px;
				box-shadow: 0 0 5px #aaa;
				padding: 10px;
				width: 300px;
				height: auto;
			}
		</style>
	</head>
	<body>
		<div id ='container' class="container">
		</div>
		<script>
			let datas = [
				'https://i.loli.net/2018/10/18/5bc76252c639d.jpg',
				'https://i.loli.net/2018/10/18/5bc76379c3a2b.jpg',
				'https://i.loli.net/2018/10/18/5bc76379d7315.jpg',
				'https://i.loli.net/2018/10/18/5bc76379dab61.jpg',
				'https://i.loli.net/2018/10/18/5bc76379de919.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e3997.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e4960.jpg',
				'https://i.loli.net/2018/10/18/5bc761041f867.jpg',
				'https://i.loli.net/2018/10/18/5bc76104334e7.jpg',
				'https://i.loli.net/2018/10/18/5bc76104d8b18.jpg',
				'https://i.loli.net/2018/10/18/5bc76104d9c87.jpg',
				'https://i.loli.net/2018/10/18/5bc76105c5e39.jpg',
				'https://i.loli.net/2018/10/18/5bc76105ed148.jpg',
				'https://i.loli.net/2018/10/18/5bc76106127d0.jpg',
				'https://i.loli.net/2018/10/18/5bc7610624237.jpg',
				'https://i.loli.net/2018/10/18/5bc76106d9bca.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e6cb4.jpg',
				'https://i.loli.net/2018/10/18/5bc76379ebb30.jpg',
				'https://i.loli.net/2018/10/18/5bc76379ec94a.jpg',
				'https://i.loli.net/2018/10/18/5bc76397bf2bf.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c380f.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c57ac.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c7e54.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c92e1.jpg',
				'https://i.loli.net/2018/10/18/5bc76397d167c.jpg',
				'https://i.loli.net/2018/10/18/5bc76397d49ea.jpg',
				'https://i.loli.net/2018/10/18/5bc76397d97ca.jpg'
			]
			let container = document.getElementById('container')
			for (let src of datas) {
				container.appendChild(makeDiv(src))
			}
			function makeDiv(src) {
				let div = document.createElement('div')
				div.className = 'box'
				let img = document.createElement('img')
				img.src = src
				div.appendChild(img)
				return div
			}

		</script>
	</body>
</html>
